<template>
  <div>
    <a-card :bordered="false" size="default" title="仪表盘列表">
      <div class="table-operator">
        <a-button type="primary" class="btn-success" icon="plus" @click="handleAdd()">新增</a-button>
      </div>
      <a-spin :spinning="loading">
        <a-table
          ref="table"
          :columns="columns"
          :dataSource="data"
          :pagination="pagination"
          @change="handleTableChange"
          rowKey="id"
        >
          <span slot="name" slot-scope="text, record">
            <a-tooltip>
              <template slot="title"> 查看仪表盘详情 </template>
              <router-link :to="{ name: 'DashboardDetail', query: { id: record.id } }">{{ text }}</router-link>
            </a-tooltip>
          </span>
          <span slot="dictValue" slot-scope="text">
            <ellipsis :length="80" tooltip>{{ text }}</ellipsis>
          </span>
          <span slot="operate" slot-scope="text, record">
            <a @click="handleEdit(record)">修改</a>
            <a-divider type="vertical" />
            <a class="text-danger" @click="handleDelete(record)">删除</a>
          </span>
        </a-table>
      </a-spin>
      <create-modal ref="createModal" @ok="handleOk" />
      <edit-modal ref="editModal" @ok="handleOk" />
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import { Ellipsis } from '@/components'
import CreateModal from './modules/createModal'
import EditModal from './modules/editModal'
import { getDashBoardList, deleteDashBoard } from '@/api/dashboard'
import { getRoutePermission } from '@/utils/util'

export default {
  name: 'DashboardList',
  components: {
    Ellipsis,
    CreateModal,
    EditModal
  },
  data () {
    return {
      routerPermission: {}, // 页面菜单权限
      data: [],
      loading: true,
      visible: false,
      confirmLoading: false,
      // 分页属性
      pagination: {
        defaultPageSize: 10,
        pageNo: 0,
        pageSize: 10, // 默认每页显示数量
        showSizeChanger: true, // 显示可改变每页数量
        showQuickJumper: true, // 是否可以快速跳转至某页
        pageSizeOptions: ['10', '20', '50', '100'], // 每页数量选项
        showTotal: (total) => this.$t('pagination.total') + ` ${total} ` + this.$t('pagination.items'), // 分页中显示总的数据
        total: 0 // 总条数
      },
      columns: [
        {
          title: '名称',
          dataIndex: 'name',
          width: 300,
          scopedSlots: { customRender: 'name' },
          sorter: (a, b) => {
            return a.name.localeCompare(b.name)
          }
        },
        {
          title: '描述',
          dataIndex: 'description',
          scopedSlots: { customRender: 'description' }
        },
        {
          title: '创建时间',
          dataIndex: 'createDate'
        },
        {
          title: '修改时间',
          dataIndex: 'modifyDate'
        },
        {
          title: '创建人',
          dataIndex: 'createBy'
        },
        {
          title: '操作',
          width: '150px',
          dataIndex: 'operate',
          scopedSlots: { customRender: 'operate' }
        }
      ]
    }
  },
  created () {},
  mounted () {
    this.getList()
    // this.getPermission()
  },

  methods: {
    // 获取当前页面的权限
    getPermission () {
      this.routerPermission = getRoutePermission(this.$route.name)
    },

    /**
     * 新增
     */
    handleAdd () {
      this.$refs.createModal.init()
    },

    /**
     * 编辑
     */
    handleEdit (record) {
      this.$refs.editModal.init(record)
    },

    /**
     * 删除
     */
    handleDelete (record) {
      this.$confirm({
        title: '提示',
        content: `你确认要删除字典 ${record.name} 吗?`,
        okText: '确定',
        okType: 'primary',
        cancelText: '取消',
        onOk: () => {
          deleteDashBoard({ id: record.id }).then((res) => {
            // 存储成功、刷新列表
            this.$notification['success']({
              message: '提示',
              description: '数据删除成功'
            })
            if (this.data.length === 1) {
              this.pagination.pageNo = this.pagination.pageNo - 1
            }
            this.getList()
          })
        },
        onCancel () {
          console.log('Cancel')
        }
      })
    },

    /**
     * 获取列表
     */
    getList () {
      const filter = { sort: 'id,desc', page: this.pagination.pageNo, size: this.pagination.pageSize }
      this.loading = true
      getDashBoardList(filter)
        .then((response) => {
          console.log('字典列表----', response)
          response.data.forEach((item) => {
            item.createDate = moment(item.createDate).format('YYYY-MM-DD HH:mm:ss')
            item.modifyDate = moment(item.modifyDate).format('YYYY-MM-DD HH:mm:ss')
          })
          this.loading = false
          this.data = response.data
          this.pagination.total = Number(response.totalCount)
        })
        .catch((error) => {
          console.log(error)
        })
    },

    /**
     * 更新列表
     */
    handleOk () {
      this.getList()
    },

    /**
     * 分页方法
     */
    handleTableChange (pagination) {
      console.log('分页事件-----------', pagination)
      this.pagination.pageNo = pagination.current - 1
      this.pagination.pageSize = pagination.pageSize
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>
</style>>
